<template>

  <view class="homePage">

    <template v-for="(item,index) in commonStore.dateInfoList" v-if="commonStore.dateInfoList.length>0"
              :key="index">
      <uni-section :title="item.name" type="line">
        <uni-card :is-shadow="true">
          <view class="row justify-between items-center ">
            <view>
              在{{ item.lunar ? '农历' : '公历' }} <span class="text-bold ">{{ subscribeText(item) }}</span>
            </view>
            <view>
              <uni-icons size="16" type="trash-filled" @click="commonStore.deleteDate(item.id)"></uni-icons>
            </view>
          </view>

          <view class="row justify-between items-center">
            <view>
              下次公历日期 <span class="text-bold text-primary">{{ item.nextSolarDay }}</span>
            </view>
            <view><span class="text-accent text-bold">{{ item.needDays }}</span> 天后</view>
          </view>
        </uni-card>
      </uni-section>
    </template>
    <view v-else class="row justify-center full-height items-center q-mt-lg q-pt-lg text-center"
          @click="routerJump('/pages/addDate/index')">
      <view>
        <view>
          <text>添加日期</text>
        </view>
        <view>
          <uni-icons size="30" type="plusempty"></uni-icons>
        </view>

      </view>
    </view>

  </view>

</template>

<script lang="ts" setup>
import {computed,onMounted} from "vue";
import type {dateInfoInterface} from "@/assets/ts/Interface";
import {useCommonStore} from "@/stores/commonStore";
import {routerJump} from '@/assets/ts/publicUtil'
import {onPullDownRefresh} from "@dcloudio/uni-app";

const commonStore = useCommonStore();
onPullDownRefresh(async () => {
  await commonStore.getDateList()
  uni.stopPullDownRefresh()
})
onMounted(()=>{
  commonStore.getDateList()
})

const subscribeText = computed(() => {
  return (item: dateInfoInterface) => {
    return item.lunarDate || item.solarDate

  };
});


</script>

<style scoped>
.homePage {
  overflow-y: scroll;
  max-height: calc(100vh - 0px);
}

.normalCard {
  background: var(--system-bg2);
  border-radius: 8px;
  box-shadow: 0px 3px 5px 0px rgba(64, 75, 99, 0.08);
}
</style>
